<template name="invite_member_modal">
  <div class="modal fade" id="invite-member-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">邀请好友</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body p-0" id="invite-member-modal-body" style="height: 80vh;">
          <div class="p-3">
            <div class="form-group">
              <label for="invite-member-input">邀请好友加入</label>
              <input type="email" class="form-control" id="invite-member-input" placeholder="输入用户名">
              <small id="invite-member-help" class="form-text text-muted">请输入用户名以查找好友</small>
            </div>
            <ul class="list-group">
              {{#each result in results}}
                {{> invite_member_item result=result channel=channel}}
              {{/each}}
              {{#if loading}}
                {{> loader_ball_beat}}
              {{/if}}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="invite_member_item">
  {{#unless isOwner}}
    {{#unless isMember}}
    <li class="list-group-item d-flex align-items-center py-2">
      <img class="rounded-circle mr-3" src="{{avatar}}" width="40">
      <b>{{display}}</b> @{{username}}
      <a class="send-invite ml-auto" href="#">发送邀请</a>
    </li>
    {{/unless}}
  {{/unless}}
</template>